<template>
	<view>
		<nav-header title="附近动态" :showRight="false"></nav-header>
		<view class="updates-header">
			<view class="header">
				<view class="header-action" @tap="openPicker">
					<uni-icons type="location" size="30"></uni-icons>
					<text>{{ addressData.city }}</text>
				</view>
				<view class="header-action">
					<text>我也发一条</text>
					<uni-icons type="camera" size="30"></uni-icons>
				</view>
			</view>
		</view>
		<view class="updates-sort">
			<view class="sort">
				<view v-for="item in qunList" :key="item.id" class="sort-item">
					<img :src="item.image" alt="" class="sort-img">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="moments-content">
			<view class="content" v-for="item in mList" :key="item.id">
				<view class="user-info">
					<head-image class="img" :name="item.nickName" :url="item.headImageThumb" :size="65"></head-image>
					<text class="uname">{{ item.nickName }}</text>
				</view>
				<view class="publish">
					<view class="publish-text">
						{{ item.title }}
					</view>
					<view class="publish-img">
						<view v-for="it in item.imgList" :key="it">
							<img :src="it.pic" alt="" class="pimg">
						</view>
					</view>
					<view class="publish-loc">
						<text>{{ item.location }}</text>
					</view>
					<view class="publish-gn">
						<text class="gn-time">{{ item.time }}</text>
						<view class="gn-right">
							<view v-show="selectedUserId === item.userId">
								<view class="good-list">
									<view class="good">
										<uni-icons type="heart" size="18" style="padding-left: 10rpx;"></uni-icons>
										<text>点赞
											| </text>
									</view>
									<view class="good">
										<uni-icons type="chatbubble" size="18"></uni-icons> <text>评论</text>
									</view>
								</view>
							</view>
							<uni-icons type="more-filled" size="28" @click="toggleActions(item.userId)"></uni-icons>
						</view>
					</view>
					<view class="publish-dz">
						<uni-icons type="heart" size="18" color="#118dd0"></uni-icons>
						<view class="dz">
							<view v-for="i in item.dzList" :key="i.userId">
								{{ i }}
							</view>
						</view>
					</view>
					<view class="publish-pl">
						<view style="padding-top: 10rpx;">
							<uni-icons type="chatbubble" size="20" color="#118dd0"></uni-icons>
						</view>
						<view class="pl">
							<view v-for="pl in item.plList" :key="pl" style="padding-top: 10rpx;">
								<text>{{ pl.user }}</text>: <text class="pl-text">{{ pl.text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			qunList: [{
				id: 1,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "官方群"
			},
			{
				id: 2,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "磨具行业群"
			},
			{
				id: 3,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "程序员群"
			},
			{
				id: 4,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "五金群"
			},
			{
				id: 5,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "少儿培训"
			},
			{
				id: 6,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "家长群"
			},
			{
				id: 7,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "企业入驻"
			},
			{
				id: 8,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "官方合作"
			},
			{
				id: 9,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "加入我们"
			},
			{
				id: 10,
				image: this.getResource('/icon/qun-avatar-default.svg'),
				name: "发布动态"
			}
			],
			mList: [],
			selectedUserId: null,
			List: [{
				userId: 1,
				nickName: "附近的人",
				headImageThumb: "",
				title: "今日生活照，今天也有好好生活噢",
				imgList: [{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				}
				],
				location: "松山湖欧洲小镇",
				time: "2小时前",
				dzList: [{
					userId: 2,
					text: "小米-雷军"
				},
				{
					userId: 3,
					text: "小米-阿斯顿"
				},
				{
					userId: 4,
					text: "小米-阿瑟东"
				},
				{
					userId: 5,
					text: "小米-卢本伟"
				},
				{
					userId: 6,
					text: "小米-王老师"
				}
				],
				plList: [{
					userId: 2,
					user: "小米-雷军",
					text: "那些玩霓虹的cs们，你们好"
				},
				{
					userId: 3,
					user: "小米-阿斯顿",
					text: "就玩就玩"
				},
				{
					userId: 4,
					user: "小米-阿瑟东",
					text: "五星上将"
				},
				{
					userId: 5,
					user: "小米-卢本伟",
					text: "番茄鸡蛋番茄牛肉"
				}
				]
			},
			{
				userId: 2,
				nickName: "附近的人",
				headImageThumb: "",
				title: "那些玩霓虹的cs们，你们好，我是雷军。你们是不是没手没脚玩这个角色，每次我起好大枪准备打的时候就被你们一个滑铲干死了，真是玩你妈",
				imgList: [{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				},
				{
					pic: this.getResource('/icon/pyq.svg')
				}
				],
				location: "日落之城",
				time: "1小时前",
				dzList: [{
					userId: 3,
					text: "小米-阿斯顿"
				},
				{
					userId: 6,
					text: "美国-麦克阿瑟"
				},
				{
					userId: 5,
					text: "小米-卢本伟"
				},
				{
					userId: 7,
					text: "小米-王老师"
				}
				],
				plList: [{
					userId: 3,
					user: "小米-阿斯顿",
					text: "就玩就玩"
				},
				{
					userId: 6,
					user: "美国-麦克阿瑟",
					text: "五星上将也认可"
				},
				{
					userId: 5,
					user: "小米-卢本伟",
					text: "玩霓虹的都是番茄鸡蛋番茄鼻屎"
				}
				]
			}
			],
			show: false,
			province: "广东省",
			city: "广州市",
			area: "天河区",
			areaCode: "440106",
			addressData: {
				name: '',
				phone: '',
				address: '',
				moreAddres: '',
				isdefult: 0,
				city: ''
			},
			isShow: true
		}
	},
	methods: {
		openPicker() {
			console.log('执行打开地址选择器')
			this.show = true
		},

		changeClick(value, value2, value3, value4) {

			console.log('地址选择器 = ' + value + value2 + value3 + value4);

			this.province = value;
			this.city = value2;
			this.area = value3;
			this.areaCode = value4;
		},
		onhideShow() {
			this.show = false
			console.log('执行了关闭地址选择器')
		},
		//选中省市区
		onsetCity(e) {
			let data = e.detail.target.dataset;
			// let address = data.province + data.city + data.area;
			let address = `${data.province}-${data.city}-${data.area}`;
			this.show = false
			this.addressData.address = address
			this.addressData.city = data.city
		},
		toggleActions(userId) {
			if (this.selectedUserId === userId) {
				this.selectedUserId = null;
			} else {
				this.selectedUserId = userId;
			}
		},
		getData() {
			if (this.List.length > 0) {
				this.List.forEach(i => {
					let names = i.dzList.map(dzList => dzList.text)


					i.dzList = names.join("，")
				})
				console.log(this.List)
				this.mList = this.List
			}
		}
	},
	onLoad() {
		this.getData()
	}
}
</script>

<style lang="less" scoped>
.updates-header {
	width: 100%;

	.header {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.header-action {
			display: flex;
			align-items: center;

			text {
				color: #0a74ff;
			}
		}
	}
}

.updates-sort {
	width: 100%;

	.sort {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.sort-item {
			width: 130rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 10rpx 0;

			text {
				font-size: 25rpx;
			}

			.sort-img {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
}

.moments-content {
	width: 100%;

	.content {
		padding: 20rpx 30rpx 20rpx 30rpx;

		.user-info {
			display: flex;
			align-items: center;

			.uname {
				margin-left: 20rpx;
				color: #118dd0;
			}
		}

		.publish {
			padding-left: 85rpx;

			.publish-text {
				font-size: 30rpx;
			}

			.publish-img {
				display: flex;
				flex-wrap: wrap;

				.pimg {
					width: 190rpx;
					height: 190rpx;
					padding: 10rpx 20rpx 0 0;
				}
			}

			.publish-loc {
				font-size: 25rpx;
				color: #118dd0;
			}

			.publish-gn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.gn-time {
					font-size: 25rpx;
					color: #aaa;
				}

				.gn-right {
					display: flex;
					justify-content: flex-end;
					flex: 1;
				}

				.good-list {
					display: flex;
					align-items: center;
					padding: 0 10rpx;

					.good {
						display: flex;
						align-items: center;
						background-color: #d8d8d8;
						font-size: 25rpx;


						text {
							padding: 10rpx;
						}
					}
				}
			}

			.publish-dz {
				display: flex;
				border-bottom: 1px solid #eee;
				padding-bottom: 10rpx;

				.dz {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					font-size: 25rpx;
					color: #118dd0;
				}
			}

			.publish-pl {
				display: flex;

				.pl {
					font-size: 25rpx;
					color: #118dd0;

					.pl-text {
						color: #000;
					}
				}
			}
		}
	}
}
</style>